<template>
	<view class="mount-page">
		<!-- 挂载方式-->
		<view class="method-box">
			<view class="mount-method" @click="showAccount" v-if="accountList.length > 1">
				<view>挂载账号</view>
				<view class="right">
					<view class="text">{{accountText}}</view>
					<image style="width: 43rpx; height: 43rpx;" src="../../static/image/right.png"></image>
				</view>
			</view>
			
			<view class="mount-method" v-if="is_kol">
				<view>挂载类型</view>
				<picker class="picker-view" @change="pickerChange" :value="pickerIndex"
				:range="pickerArr" range-key="name">
					<view>{{pickerArr[pickerIndex].name}}</view>
					<image style="width: 43rpx; height: 43rpx;" src="../../static/image/right.png"></image>
				</picker>
			</view>
			<view class="mount-method" @click="showModal" v-if="is_kol">
				<view>选择专场</view>
				<view class="right">
					<view class="text">{{specialName}}</view>
					<image style="width: 43rpx; height: 43rpx;" src="../../static/image/right.png"></image>
				</view>
			</view>
			
			<view class="mount-method" v-if="is_tow">
				<view>展示形式</view>
				<picker class="picker-view" @change="cateChange" :value="cateIndex"
				:range="cateArr" range-key="name">
					<view>{{cateArr[cateIndex].name}}</view>
					<image style="width: 43rpx; height: 43rpx;" src="../../static/image/right.png"></image>
				</picker>
			</view>
			
			<view class="btn-box">
				<button class="btn" @click="jumpPage">确定</button>
			</view>
			
		</view>
		<uni-popup ref="popup">
			<view class="dea-box">
				<view class="cancel-title">
					<view class="cancel"></view>
					<view class="title">选择专场</view>
					<view class="queren"></view>
				</view>
				<view class="list-box">
					<view class="list-item" v-for="item in specialList" :key="item.hid" @click="selectSpecial(item)">
						<view class="title">{{item.title}}</view>
						<view class="address">{{item.act_time}}</view>
						<uni-icons v-show="item.is_sel" class="icon" type="checkmarkempty" size="20"></uni-icons>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="catePopup">
			<view class="box">
				<view class="bg">
					<view class="item" v-for="item in cateArr" :key="item.hid" @click="changeCate(item)">
						{{item.name}}
					</view>
				</view>
				<view class="empty"> </view>
				<view class="cancel" @click="cancel">取消</view>
			</view>
		</uni-popup>
		
		<uni-popup type="center" ref="modalPopup">
			<view class="modal">
				<view class="title">温馨提示</view>
				<view class="content">为了更好的线索收集效果，请授权头像/昵称并设置个性签名！</view>
				<view class="btn" @click="closeTips">知道了</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="accountPopup">
			<view class="account-box">
				<view class="cancel-title">
					<view class="cancel"></view>
					<view class="title">选择账号</view>
					<view class="queren"></view>
				</view>
				<view class="list">
					<view class="li" v-for="item in accountList" :key="item.hid" @click="selectAccount(item)">
						<view class="title">{{item.name}}</view>
						<uni-icons v-show="item.is_sel" class="icon" type="checkmarkempty" size="20"></uni-icons>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const Api = require('../../utils/api.js');
	const request = require('../../utils/request.js');
	
	import {deliverClickCallback} from '../../utils/deliverClickCallback.js'
	export default {
		data() {
			return {
				pickerArr:[],
				pickerIndex: 1,
				configList: [],
				cate: 2,
				specialName:'请选择专场',
				specialList: [], 
				specialId: '',
				mount_log_hid: '',
				is_kol: false,
				kol_info: {},
				banner: '',
				reqArgs: {},
				special_hid: "",
				cateName:'请选择展示形式',
				is_tow: false,
				jumpPath:'',
				cateArr: [],
				cateIndex:0,
				accountText: '请选择抖音账号',
				accountList: [],
				accountId: ''
			}
		},
		onLoad(options) {
			console.log(options, "挂载中心555")
			this.reqArgs = options
			this.mount_log_hid = options.mount_log_hid
			this.specialId = options.special_hid
			this.cate = options.mount_cate ? options.mount_cate : this.cate
			
			this.getSpecialList()
			this.getPageInfo()
			console.log(this.mount_cate, "333")
			if(this.cate != undefined) {
				if(this.cate == 1){
					this.pickerIndex = 0
				} else {
					this.pickerIndex = 1
				}
			}

			// 广告访问页面数据上报
			deliverClickCallback("page_view", this.reqArgs)
			
		
		},
		onShow() {
			tt.hideHomeButton()
		},
		// onUnload() {
		// 	uni.switchTab({
		// 		url: '/pages/personal/personal'
		// 	})
		// },
		methods: {
		
			// picker 切换
			pickerChange({detail}) {
				this.pickerIndex = detail.value;
				if(this.pickerIndex == 1) {
					this.cate = 2
				} else {
					this.cate = 1
				}
				this.updataMount()
			},
			
			
			//配置详情
			getPageInfo() {
				request.http({
					url:Api.page_info,
					header: {
						// 'content-type': 'application/x-www-form-urlencoded',
						'token':uni.getStorageSync('token')
					},
					type: 'GET',
					data: {
						mount_log_hid: this.mount_log_hid
					}
				}).then(res => {
					// console.log(res, '333')
					console.log(res.data, '详情')
					this.pickerArr = res.data.mount_cate_list
					this.configList = res.data.style_list
					this.is_kol = res.data.is_kol
					this.kol_info = res.data.kol_info
					this.banner = res.data.special_info.cover
					if(res.data.account_list.length >1){
						this.accountList = res.data.account_list
						this.accountList.map(item => {
							item.is_sel = false
						})
					}
					if(this.is_kol) {
						if(res.data.special_info.title != '') {
							this.specialName = res.data.special_info.title
							this.specialId = res.data.special_info.hid
						} 
					}
				})
			},
			
		
			
			showModal () {
				console.log(this.specialId, "specialId")
				this.$refs.popup.open('bottom')
			},
			
			getSpecialList () {
				request.http({
					url:Api.special_list,
					header: {
						// 'content-type': 'application/x-www-form-urlencoded',
						'token':uni.getStorageSync('token')
					},
					type: 'GET',
					data:{
						mount_cate:this.cate,
						mount_log_hid: this.mount_log_hid,
					}
				}).then(res => {
						this.specialList = res.data.list
				})
			},
			selectSpecial (val) {
				
				if(val.show_cates.length > 1){
					this.cateArr =val.show_cates
					this.is_tow = true
					this.jumpPath = val.show_cates[0].path
					this.cateIndex = 0
				} else {
					this.jumpPath = val.show_cates[0].path
					this.is_tow = false
				}
				this.specialList.map(item => {
					if(val.hid == item.hid){
						if(item.is_sel) {
							item.is_sel = false
							this.is_tow = false
							this.specialName = '请选择专场'
						} else {
							item.is_sel = true
						}
						
					} else {
						item.is_sel = false
					}
				})
				let arr = this.specialList.find(item => item.is_sel == true)
				if(arr == undefined) {
					this.specialId = ''
				} else {
					this.specialId =arr.hid
					this.specialName = arr.title
				}
				this.updataMount()
				this.$refs.popup.close()
			},
			cancel() {
				this.$refs.catePopup.close()
			},
			cateModal() {
				this.$refs.catePopup.open('center')
			},
			
			changeCate(val) {
				this.jumpPath = val.path
				this.cateName = val.name
				this.$refs.catePopup.close()
			},
			updataMount() {
				request.http({
					url:Api.mount_update,
					header: {
						// 'content-type': 'application/x-www-form-urlencoded',
						'token':uni.getStorageSync('token')
					},
					type: 'POST',
					data: {
						cate: this.cate,
						mount_log_hid: this.mount_log_hid,
						special_hid:this.specialId,
						account_hid: this.accountId
					}
				}).then(res => {
				})
			},
			
			cateChange({detail}) {
				
				this.cateIndex = detail.value;
				
				this.cateArr.map((item,index) => {
					if(index == this.cateIndex ){
						this.jumpPath = item.path
					}
				})
			},
			jumpPage() {
				console.log(this.specialId, "333ww")

				if(this.specialId == ''|| this.specialId == undefined) {
					uni.showToast({
						title:'请选择专场',
						icon:'none'
					})
					return
				}
				if(this.is_tow) {
					if(this.jumpPath == ''){
						uni.showToast({
							title:'请选择展示形式',
							icon:'none'
						})
						return
					}
				}
				
				if(this.accountList.length >1) {
					if(this.accountId == '') {
						uni.showToast({
							title:'请选择抖音账号',
							icon:'none'
						})
						return
					}
				}
				console.log(this.jumpPath, "地址")
				uni.navigateTo({
					url: this.jumpPath
				})
			},
			
			showAccount() {
				this.$refs.accountPopup.open('bottom')
			},
			selectAccount(val) {
				console.log('www')
				this.accountList.map(item => {
					if(val.hid == item.hid){
						if(item.is_sel) {
							item.is_sel = false
							this.accountText = '请选择抖音账号'
							this.accountId = ''
						} else {
							item.is_sel = true
							this.accountText = item.name
							this.accountId = item.hid
						}
						
					} else {
						item.is_sel = false
					}
				})
				this.updataMount()
				this.$refs.accountPopup.close()
			}
			
			
			
			
			
			
		},
		
		
		
		
	}
</script>

<style lang="less" scoped>
	.mount-page {
		width: 100%;
		min-height: 1400rpx;
		background: #F5F9FC; 
		
		.box {
					width: 750rpx;
					height: 315rpx;
					// background: #fff;
					border-radius: 7rpx 7rpx 0rpx 0rpx;
					.bg {
						width: 100%;
						height: 200rpx;
						
						padding: 0 29rpx;
						box-sizing: border-box;
						background: #fff;
						
						
						:first-child{
							border-bottom: 1rpx solid #DCDDE0;
						}
						.item {
							width: 100%;
							height: 100rpx;
							
							text-align: center;
							font-size: 27rpx;
							font-weight: 400;
							color: #222526;
							line-height: 100rpx;
						
						}
					} 
					.empty {
						width: 750rpx;
						height: 14rpx;
						background: #F6F7FC;
					}
					
					.cancel {
						width: 100%;
						height: 100rpx;
						text-align: center;
						line-height: 100rpx;
						// margin-top: 14rpx;
						font-size: 27rpx;
						font-weight: 400;
						color: #222526;
						background: #fff;
					}
				}
		
		.method-box {
			padding: 0 21rpx;
			box-sizing: border-box;
			margin-top: 21rpx;
			.mount-method {
				border-radius: 7rpx;
				height: 109rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #fff;
				font-size: 31rpx;
				margin-bottom: 21rpx;
				box-sizing: border-box;
				padding: 0 21rpx;
				box-sizing: border-box;
				.picker-view {
					color: #6E7175;
					font-size: 27rpx;
					display: flex;
					align-items: center;
				}
				.right {
					display: flex;
					align-items: center;
					.text{
						font-size: 27rpx;
						font-weight: 400;
						color: #6E7175;
					}
				}
			}
			.btn-box {
				width: 100%;
				display: flex;
				align-items: center;
				.btn{
					width: 692rpx;
					height: 87rpx;
					background: #3075FE;
					border-radius: 4rpx;
					font-weight: 400;
					color: #FFFFFF;
					font-size: 29rpx;
					line-height:87rpx;
					margin-top: 23rpx;
				}
			}
		}
		
		
		.page-list {
			font-size: 31rpx;
			margin-top: 20rpx;
			padding: 0 21rpx;
			box-sizing: border-box;
			.list-item {
				width:100%;
				height: 178rpx;
				background: #FFFFFF;
				border-radius: 7rpx;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				padding: 0 15rpx;
				box-sizing: border-box;
				.left {
					height: 100%;
					display: flex;
					align-items: center;
					
					img {
						width: 199rpx;
						height: 134rpx;
						
					}
				}
				.middle {
					height: 100%;
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content:center;
					.name {
						font-size: 31rpx;
						font-weight: 500;
						color: #222526;
						margin-bottom: 18rpx;
					}
					.price {
						font-size: 22rpx;
						font-weight: 400;
						color: #6E7175;
					}
				}
				
				.right {
						.btn{
							width: 137rpx;
							height: 58rpx;
							background: #3075FE;
							border-radius: 4rpx;
							font-size: 22rpx;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 58rpx;
						}
					}
			}
		}
	}
	
	.dea-box {
		width: 100%;
		height: 942rpx;
		overflow-y: auto;
		background: #FFFFFF;
		padding:0 29rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.cancel-title {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 32rpx 0;
			box-sizing: border-box;
			border-bottom: 1rpx solid #DCDDE0;;
	
			.cancel {
				font-weight: 400;
				color: #222526 ;
				font-size: 29rpx;
			}
			.queren {
				font-weight: 400;
				color: #3075FE;
				font-size: 29rpx
			}
			.title {
				flex: 1;
				text-align: center;
				font-weight: 500;
				color: #222526;
				font-size: 33rpx;
			}
		}
		.list-box {
			width: 100%;
			overflow-y: auto;
			.list-item {
				width: 100%;
				padding-top: 20rpx;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				position: relative;
				.icon {
					position:absolute;
					top:40%;
					right: 20rpx;
					transform: translate(0, -40%);
				}
				.title {
					font-weight: 500;
					color: #222526;
					font-size: 29rpx;
					margin-bottom: 15rpx;
				}
				.address {
					font-weight: 400;
					font-size: 22rpx;
					color: #6E7175;
					border-bottom: 1rpx solid #DCDDE0;
					padding-bottom:23rpx ;
				}
			}
		}
		
	}
	
	.account-box {
		width: 100%;
		height: 800rpx;
		overflow-y: auto;
		background: #FFFFFF;
		padding:0 29rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.cancel-title {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 32rpx 0;
			box-sizing: border-box;
			border-bottom: 1rpx solid #DCDDE0;;
			
			.cancel {
				font-weight: 400;
				color: #222526 ;
				font-size: 29rpx;
			}
			.queren {
				font-weight: 400;
				color: #3075FE;
				font-size: 29rpx
			}
			.title {
				flex: 1;
				text-align: center;
				font-weight: 500;
				color: #222526;
				font-size: 33rpx;
			}
		}
		.list {
			width: 100%;
			overflow-y: auto;
			.li {
				width: 100%;
				padding-top: 10rpx;
				
				height: 90rpx;
				display: flex;
				align-items: center;
				position: relative;
				border-bottom: 1rpx solid #DCDDE0;;
				.icon {
					position:absolute;
					top:40%;
					right: 20rpx;
					transform: translate(0, -40%);
				}
				.title {
					font-weight: 500;
					color: #222526;
					font-size: 29rpx;
					margin-bottom: 15rpx;
				}
			}
		}
	}
		
	.info-box {
		width: 100%;
		height: 159rpx;
		display: flex;
		align-items: center;
		background: #fff;
		padding: 0 28rpx;
		box-sizing: border-box;
		.left {
			width: 101rpx;
			height: 101rpx;
			border-radius: 50%;
			border: 3rpx solid #DCDDE0;
			margin-right: 28rpx;
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}
		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			.name {
				font-size: 33rpx;
				font-weight: 500;
				color: #222526;
				margin-bottom: 14rpx;
			}
			.qianming {
				font-size: 24rpx;
				font-weight: 400;
				color: #6E7175;
			}
		}
		
	}
	.banner {
		width: 100%;
		height: 264rpx;
		padding:  21rpx 21rpx 0 21rpx;
		box-sizing: border-box;
		image {
			width: 100%;
			height: 100%;
		}
		.box {
			width: 750rpx;
			height: 315rpx;
			background: #fff;
			border-radius: 7rpx 7rpx 0rpx 0rpx;
			.bg {
				width: 100%;
				height: 200rpx;
				
				padding: 0 29rpx;
				box-sizing: border-box;
				// background: #fff;
				
				
				:first-child{
					border-bottom: 1rpx solid #DCDDE0;
				}
				.item {
					width: 100%;
					height: 100rpx;
					
					text-align: center;
					font-size: 27rpx;
					font-weight: 400;
					color: #222526;
					line-height: 100rpx;
				
				}
			} 
			.empty {
				width: 750rpx;
				height: 14rpx;
				background: #F6F7FC;
			}
			
			.cancel {
				width: 100%;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				// margin-top: 14rpx;
				font-size: 27rpx;
				font-weight: 400;
				color: #222526;
				background: #fff;
			}
		}
	}
</style>